<template>
	<el-card shadow="never" style="padding-bottom: 0px !important;margin-bottom: 0px !important;height: 100% !important;
				padding-bottom: 0px;border-width: 0px !important;
				">
		<el-header style="height: 35px;margin-top: -3px;margin-left: -10px;width: 100%;padding-right: 0px;justify-content:left">
			<div class="left-panel" style="width: 90%;">
			<div class="addtitleTopImg"></div>
			<span class="todotitle">资产增长统计</span>
			<!--div class="right-panel">
				<div style="width: 80px;" class="syselect,no-Clear">
					<el-select @change="loadData" size="default" style="width:100%;" v-model="zczztjxl" >
						<el-option v-for="item in searchForm" :key="item.value" :label="item.label" :value="item.value"/>
					</el-select>
				</div>
			</div-->
		</div>
			<div class="right-panel">
				<div style="width: 80px;" class="syselect,no-Clear">
					<el-select  size="default" style="width:100%;" v-model="zczztjxl" >
						<el-option v-for="item in searchForm" :key="item.value" :label="item.label" :value="item.value"/>
					</el-select>
				</div>
				</div>
		</el-header>
		
		<scEcharts :height="height" :option="option" ></scEcharts>
	</el-card>
</template>

<script>
	import scEcharts from '@/components/scEcharts';
	import ExSelect from "@/components/exSelect/index.vue";
	import tool from "@/utils/tool";
	import globalparam from "@/constant/model/globalparam";

	/**
	 * 引入组件 @/components/scEcharts
	 * 组件内部会自动加载主题 @/components/scEcharts/echarts-theme-T.js
	 * 支持props包括 height，width，option
	 * 组件export百度Echarts所有方法，使用方式: new scEcharts[fun]
	 */

	export default {
		name: 'chart',
		components: {
			scEcharts
		},
		props: {
			height: { type: String, default: "160px" },
		},
		data() {
			return {
				option: {
					title: {
						subtext: '单位:万',
					},
					grid: {
						top: '35px'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['数量', '原值', '净值']
					},
					xAxis: {
						type: 'category',
						data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [120, 200, 150, 80, 70, 110, 130,150, 80, 70, 110, 130],
						type: 'bar',
						barWidth: '4px',
						name:'数量',
					},{
						data: [120, 200, 150, 80, 70, 110, 130,150, 80, 70, 110, 130],
						type: 'bar',
						barWidth: '4px',
						name:'原值',
					},{
						data: [120, 200, 150, 80, 70, 110, 130,150, 80, 70, 110, 130],
						type: 'bar',
						barWidth: '4px',
						name:'净值',
					},
					]
				},
				searchForm:[{
					value:2024,label:2024
				}],
				manageDeptIds:tool.current.manageDeptIds(),
				manageAssetCategoryIds:tool.current.manageAssetCategoryIds(),
				zczztjxl: '2024',
				assetcategoryMap: {},
				assetcategoryNames : [],
				pathCodes: [],
				assetCategoryIds: [],
				assetStatisticsRange: '',
			}
		},
		beforeMount() {
			

		},
		methods: {
			
			
			
		
		}
	}
</script>

<style>
.xia-app-title{
		color: #141e31;
		font-size: 16px;
		font-weight: 700;
		line-height: 32px;
		top:20px;
		margin-left: 10px;
		margin-top: 30px;
	}
	.symain .el-card__body {
		padding-bottom: 0px !important;
	}

	.syselect{
		line-height: 26px;
		height: 26px;
	}
	.syselect div,.syselect input{
		line-height: 26px;
		height: 26px;
	}

	.no-Clear  .el-input__wrapper:hover .el-input__suffix{
		display: none !important;

	}
	.addtitleTopImg{
		width: 20px;
  height: 20px;
  background: url(../../../../../public/img/addtitleTop.png)
    100% no-repeat;
  background-size: 100% 100%;
  float: left;
	}
	.todotitle{
		width: 117px;
  height: 18px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFangSC-Semibold;
  text-align: left;
  white-space: nowrap;
  margin-top: 0px;
  margin-left: 5px;
  font-weight: 500;
	}
</style>
